<template>
  <div>
    <el-drawer
      title="编辑名片"
      :visible.sync="drawer"
      :direction="direction"
      style="width：'600px'"
      :modal-append-to-body="true"
    >
      <div class="mpxx">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <span>名片信息</span>
          <FormItem label="员工头像" prop="avatar">
            <div class="odivimg" v-if="!formValidate.avatar" @click="modalPicTap('单选')">+</div>
            <div class="odivimg" v-else>
              <img :src="formValidate.avatar" alt="" />
              <div class="shanc">
                <Icon @click="shanc" type="ios-close-circle" />
              </div>
            </div>
            <Tooltip content="图片建议尺寸：750 * 750" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="员工姓名" prop="real_name">
            <Input v-model="formValidate.real_name" placeholder="请输入员工姓名"></Input>
          </FormItem>
          <FormItem label="当前公司" prop="enterprise_name">
            <Select v-model="formValidate.enterprise_name" placeholder="请选择">
              <Option v-for="(item,index) in gslist" :key="index" :value="item.name" >{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="员工职位" prop="position_name">
            <Select v-model="formValidate.position_name" placeholder="请选择当前职位">
                <Option v-for="(item,index) in yglist" :key="index" :value="item.name" >{{item.name}}</Option>
            </Select>
          </FormItem>
          <Row>
            <Col span="8">
              <FormItem label="手机号" prop="phone">
                <Input v-model="formValidate.phone" placeholder="请输入手机号"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="座机号">
                <Input v-model="formValidate.landline" placeholder="请输入座机号"></Input>
              </FormItem>
            </Col>
            
          </Row>
          <Row>
            <Col span="8">
              <FormItem label="邮箱">
                <Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="微信号" prop="wxhao">
                <Input v-model="formValidate.wechat" placeholder="请输入微信号"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="企业微信号">
                <Input v-model="formValidate.wecom" placeholder="请输入企业微信"></Input>
                <Tooltip
                  content="员工企业微信账号，当使用企业微信通知员工时，此条数据必填，否则消息无法通知成功"
                  placement="left-start"
                >
                  <Icon type="ios-alert" />
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
          <div class="grjl">
            <span>个人简介</span>
          </div>
          <!-- <FormItem label="语音介绍" >
            <div class="shangc">
                <Input v-model="yinpin" placeholder="选择语音文件" />
                <Button type="primary">选择</Button>
            </div>
          </FormItem> -->
          <FormItem label="个性签名">
            <Input v-model="formValidate.autograph" type="textarea" :rows="4" placeholder="请输入个性签名" />
          </FormItem>
          <div class="grjl">
            <span>我的照片</span>
          </div>

          <FormItem label="详情图">
            <div class="odivimg" v-for="(item, index) in formValidate.details" :key="index">
              <img :src="item.att_dir" alt="" />
              <div class="shanc">
                <Icon @click="sha(index)" type="ios-close-circle" />
              </div>
            </div>
            <div class="odivimg" @click="modalPicTap('多选')">+</div>
            <Tooltip content="图片建议尺寸：750 * n" placement="right">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <FormItem label="详情图链接">
            <Input v-model="formValidate.details_link " placeholder="请输入详情图跳转链接"></Input>
            <Tooltip content="点击详情图片跳转网页，开启大图模式则展示大图" placement="left-start">
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <div class="grjl">
            <span>相关设置</span>
          </div>
          <FormItem label="分享标语">
            <Input v-model="formValidate.slogan" placeholder="您好，我是#公司#的#职位##我的名字#，请惠存"></Input>
            <Tooltip
              content="自定义分享标题，仅员工分享自己的名片有效。分享标语则会变成: 您好，我是某科技有限公司的总经理张三，请惠存。"
              placement="left-start"
            >
              <Icon type="ios-alert" />
            </Tooltip>
          </FormItem>
          <Row>
            <Col span="8">
              <FormItem label="虚拟靠谱数">
                <Input v-model="formValidate.reliable" placeholder="请输入虚拟靠谱数"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="虚拟浏览数" >
                <Input v-model="formValidate.browse" placeholder="请输入虚拟浏览数"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="排序值">
                <Input v-model="formValidate.sort" placeholder="请输入排序值"></Input>
                <Tooltip
                  content="值越大, 排序越靠前"
                  placement="left-start"
                >
                  <Icon type="ios-alert" />
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
          <FormItem>
            <Button type="primary" @click="tijiao('formValidate')">提交</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">返回</Button>
          </FormItem>
        </Form>
      </div>
    </el-drawer>
    <div >
      <Modal
        v-model="modalPic"
        width="950px"
        scrollable
        footer-hide
        closable
        title="上传商品图"
        :mask-closable="false"
        :z-index="5000"
      >
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="isChoice == '单选'"
        ></uploadPictures>
        <uploadPictures
          :isChoice="isChoice"
          @getPicD="getPicD"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-else
        ></uploadPictures>
      </Modal>
    </div>
  </div>
</template>
<script>
import uploadPictures from '@/components/uploadPicture';

import { u_edit,enterprise,p_list } from '@/api/buss.js';

export default {
  components: {
    uploadPictures,
  },
  name: 'getbuss',
  data() {
    return {
      gslist:[],
      yglist:[],
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      isChoice: '单选',
      modalPic: false,
      direction: 'rtl',
      drawer: false,
      formValidate: {
        avatar: '',
        position_name: '',
        real_name: '',
        enterprise_name: '',
        phone: '',
        zuphone: '',
        landline:"",
        email:'',
        wecom: '',
        wechat: '',
        autograph: '',
        details: [],
        details_link: '',
        slogan:'',
        reliable:'',
        browse:'',
        sort:0,
      },
      ruleValidate: {
        wechat: [{ required: true, message: '请填写微信号', trigger: 'change' }],
        phone: [{ required: true, message: '请填写手机号', trigger: 'change' }],
        enterprise_name: [{ required: true, message: '请选择当前公司', trigger: 'change' }],
        avatar: [{ required: true, message: '请上传图片员工姓名', trigger: 'blur' }],
        real_name: [{ required: true, message: '请填写员工姓名', trigger: 'blur' }],
       
        position_name: [{ required: true, message: '请选择员工职位', trigger: 'change' }],
      },
      uid:'1'
    };
  },
  created(){
    this.getenterprise()
    this.getp_list()
  },
  methods: {
    getp_list(){
      p_list().then((res)=>{
        this.yglist=res.data.list
      })
    },
    getenterprise(){
      enterprise().then((res)=>{
        this.gslist=res.data.list
      })
    },

    shanc() {
      this.formValidate.avatar = '';
    },
    sha(index){
      this.formValidate.details.splice(index,1);

    },
    getPic(pc) {
      console.log(pc);
      this.$nextTick(() => {
        this.formValidate.avatar = pc.att_dir;
        this.modalPic = false;
      });
    },
    getPicD(pc) {
      this.$nextTick(() => {
        this.formValidate.details = pc;
        this.modalPic = false;
      });
    },
    modalPicTap(title) {
      this.isChoice = title;
      this.modalPic = true;
    },
    tijiao(name) {
      let then=this
      this.$refs[name].validate((valid) => {
        if (valid) {
          u_edit(then.uid,then.formValidate).then((res)=>{
            this.drawer = false;
            this.$emit('oke')
          })
        } else {
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    yesno(row) {
      this.drawer = true;
      this.uid=row.uid
      this.formValidate={
        zuphone:row.zuphone,
        avatar:row.avatar,
        real_name:row.real_name,
        nickname:row.nickname,
        phone:row.phone,
        enterprise_name:row.enterprise_name,
        department_name:row.department_name,
        position_name:row.position_name,
        email:row.email,
        wechat:row.wechat,
        wecom:row.wecom,
        autograph:row.autograph,
        details:row.details,
        details_link:row.details_link,
        slogan:row.slogan,
        reliable:row.reliable,
        browse:row.browse,
        sort:row.sort
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
.shangc{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #dcdee2;
    /deep/.ivu-btn ivu-btn-primary{
        height :28px !important;
        margin-left: 20px;
    }
    /deep/.ivu-input{
        border: none;
        outline: none;
    }
}
/deep/.ivu-tooltip-inner{
    max-width: 1209px;
}
/deep/.ivu-tooltip{
    position: absolute;
    margin-left: 10px;
}
/deep/.el-drawer__open .el-drawer.rtl {
    width: 50% !important;
}
.mpxx{
    border-top: 1px solid #E1E1E1;
    margin:0px 30px;
    margin-right: 60px;
    span{
        display: inline-block;
        padding: 6px 15px;
        color: #609beb;
        background: #f5f7fa;
    }
}
.odivimg{
    float left;
    margin-right: 10px;
    width :140px;
    height :140px;
    border:1px dashed #d9d9d9;
    text-align: center;
    line-height: 140px;
    font-size: 40px;
    border-radius: 10px;
    position relative
    img{
        width :100%;
        height :100%;
    }
    .shanc{
        display:none;
        /deep/.ivu-icon{
            position :absolute;
            top:0px;
            right:0px;
        }
    }
}
.odivimg:hover{
    border: 1px dashed #609beb;
}
.odivimg:hover .shanc{
    display: block;
}
.grjl{
     border-top:1px dashed #d9d9d9;
     margin-bottom: 20px;
}
</style>
